<template>
    <div class="newslist">
        <!--  -->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
            style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!-- <el-table-column  prop="id" label="序号" width="100">
                
            </el-table-column> -->
            <el-table-column prop="name" label="姓名" width="100">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="100">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="100">
            </el-table-column>
            <el-table-column prop="number" label="学号" width="100">
            </el-table-column>
            <el-table-column prop="class" label="班级" width="100">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" width="150">
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-s-claim"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" icon="el-icon-delete-solid" type="danger"
                        @click="newDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>



        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 弹窗页 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>




    </div>




</template>


<script>
import { newsSletct, newsDelete, login } from "@/api/api"
export default {
    data() {
        return {

            tableData: [],
            dialogFormVisible: false,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            username: 'ccc',
            form: {
                name: ''
            }

        };
    },
    created() {
        this.getDate()
    },


    methods: {
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1

        },
        handleCurrentChange(val) {
            this.currentPage = val

        },
        getDate(params) {

            newsSletct(params).then(res => {
                console.log(res)
                if (res.status == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                }
            })
            // login(params).then(res=>{
            //     console.log(res)
            // })
        },
        newDelete(index, row) {
            console.log(row)
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                newsDelete(row.id).then(res => {
                    if (res.data.status === 200) {
                        this.$message({ message: '删除数据成功', typr: 'success' })
                        this.getDate()
                        console.log(res)
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        })
                    }
                })
            })

        },

        handleEdit: function (row) {
            this.dialogFormVisible = true
            console.log(row)
        },
    }   
}
</script>

<style lang="less">

</style>

